import React, { useEffect, useState } from 'react';
import '@/views/Index/ImageText/ImageText.scss'
import {Space, Button, Table } from 'antd';
import type { ColumnsType } from 'antd/es/table';
import "./Zichan.scss"
import service from '../../../api'


interface Props {

}
interface DataType {
    key: React.Key;
    name: string;
    age: number;
    img: string;
    id: string
    dataIndex: string
}

function Zichan(props: Props) {
    var [tableData, setTableData] = useState<DataType[]>([])

    // 发送获取资产列表数据 请求
    var zichan_list = async () => {
        var res = await service.shuju.zichan_list()
        res.data.map((item: any) => {
            item.key = item.id
        })
        console.log(res.data);
        setTableData(res.data);
    }
    useEffect(() => {
        zichan_list();
    }, [])

    //表格
    const columns: ColumnsType<DataType> = [
        {
            title: '时间',
            dataIndex: 'time',

        },
        {
            title: '收支类型',
            dataIndex: 'shou',

        },
        {
            title: '金额（元）',
            dataIndex: 'money',

        },
        {
            title: '账单类型',
            dataIndex: 'leixing',

        },
        {
            title: '余额（元）',
            dataIndex: 'yumoney',

        },
        {
            title: '账单摘要',
            dataIndex: 'zhaiyao',

        },
        {
            title: '订单号',
            dataIndex: 'order',

        },

    ];
    //复选框事件
    const rowSelection = {
        onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
            console.log(`selectedRowKeys: ${selectedRowKeys}`, 'selectedRows: ', selectedRows);
        },
        getCheckboxProps: (record: DataType) => ({
            id: record.dataIndex,
        }),
    };

    return (
        <div className='zichan'>
            <div className="top">
                <p>资产管理</p>
                <h2>资产管理</h2>
            </div>
            <div className="xia">
                <p>账户余额</p>
                <h2>540，000</h2>
            </div>
            <div className="biaoge">
                <div className="shang">
                    <h2>收支明细</h2>
                    <Space >
                        <Button className='btn2' type="primary">导出</Button>
                    </Space>
                </div>

                <div className="zitable">
                    <Table
                        rowSelection={{
                            ...rowSelection,
                        }}
                        columns={columns}
                        dataSource={tableData}
                    />
                </div>
            </div>
        </div>
    );
}

export default Zichan;